<div class="card">
    <div class="card-body">

        <h1 class="card-title">Simple Base Layers</h1>
        <p>
            In this example, we create a map with multiple base layers using <code>[leafletBaseLayers]</code>.
            The <code>[leafletBaseLayers]</code> directive automatically adds the layers control so the user can switch between base layers.
            You can optionally provide options for the layers control using <code>[leafletLayersControlOptions]</code>.
        </p>

        <div class="card bg-light">
            <div class="card-body">

<pre class="pre-scrollable">
&lt;div leaflet style="height: 300px;"
        [leafletOptions]="options"
        [leafletBaseLayers]="baseLayers"
        [leafletLayersControlOptions]="layersControlOptions"&gt;
&lt;/div&gt;
</pre>

            </div>
        </div>
    </div>
    <div class="card-body">

        <div class="m-2">
            <div leaflet style="height: 300px;"
                 [leafletOptions]="options"
                 [leafletBaseLayers]="baseLayers"
                 [leafletLayersControlOptions]="layersControlOptions">
            </div>
        </div>

    </div>
</div>
